import React, { PureComponent } from 'react';
import store from '../store(拆分)';
import { addNumberAction } from '../store(拆分)/counter';


class Home extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      counter: store.getState().counter.counter
    }
  }

  componentDidMount() {
    store.subscribe(() => {
      const state = store.getState().counter;
      this.setState({
        counter: state.counter
      })
    })
  }

  increment(num) {
    store.dispatch(addNumberAction(num))
  }

  render() { 

    const { counter } = this.state;
    return ( 
      <div>
        <h2>Home Counter: {counter}</h2>
        <div>
          <button onClick={() => this.increment(1)}>+1</button>
          <button onClick={() => this.increment(5)}>+5</button>
        </div>

      </div>
     );
  }
}
 
export default Home;